<template>
    <v-chart :option="option" autoresize style="height: 260px" />
  </template>
  
  <script setup>
  import { use } from 'echarts/core';
  import { LineChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  import VChart from 'vue-echarts';
  import { ref } from 'vue';
  
  use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
  
  const option = ref({
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: { type: 'value' },
    series: [
      {
        data: [120, 200, 150, 280, 170, 210],
        type: 'line',
        smooth: true,
        itemStyle: { color: '#1890ff' },
        areaStyle: { color: 'rgba(24,144,255,.1)' },
      },
    ],
  });
  </script>